<template>
  <section class="editor">
    <Header :search="false" title="编辑"/>
    <section class="editor-content-wrapper">
      <div class="editor-content">
        <div class="test1">editor</div>
        <ul class="test2">
          <li v-for="(testDatas,index) in testDatas" :key="index">{{ testDatas.title }}</li>
        </ul>
      </div>
    </section>
  </section>
</template>

<script>
import Header from '../../components/Header/NoLeftArrowHeader'
import BScroll from 'better-scroll'

export default {
  name: 'Editor',
  components: {
    Header
  },
  data() {
    return {
      testDatas: []
    }
  },
  watch: {
    testDatas(value) {
      this.$nextTick(() => {
        new BScroll('.editor-content-wrapper', {
          click: true
        })
      })
    }
  },
  mounted() {
    for (let i = 0; i < 50; i++) {
      this.testDatas.push({
        title: '测试专用1'
      })
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
@import "../../common/css/mixins.less";

.editor {
  .editor-content-wrapper {
    position: fixed;
    top: 46px;
    bottom: 50px;
    width: 100%;

    .editor-content {
      .test1 {
        height: 32px;
        background: red;
        font-size: 20px;
        text-align: center;
        line-height: 32px;
      }

      .test2 {
        font-size: 20px;
        margin-top: 5px;
        li {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
